<template>
  <div class="consensus-activity-mass-intergral">
    <c-title :text="text"></c-title>
    <p class="tips">参与记录</p>
    <div class="box" v-if="list && list.length !== 0">
      <div class="box-item" v-for="(item, i) in list" :key="item.id">
        <p class="title">{{ item.quality_activity.title }}</p>
        <p class="time">时间：{{ item.join_time_str }}-{{ item.expire_time_str }}</p>
        <div class="line" v-if="i + 1 !== list.length"></div>
      </div>
    </div>
    <div class="btn" :class="{ 'w375 foot_pc': fun.isPc() }">
      <van-button round color="#F15353" block @click="participation">参与活动</van-button>
    </div>

    <van-popup v-model="Show" round position="bottom">
      <div class="flex between align-center popup-top">
        <span @click="Show = false" class='pointer'>取消</span>
        <span>{{ text }}</span>
        <span class="c-FF2F2F pointer" @click="confirmCategory">确认</span>
      </div>
      <div style="padding: 2.1875rem 0.75rem 1.7813rem;">
        <div class="asset">
          <p class="left">活动时间</p>
          <div class="flex  wrap" style="margin-top: 0.6875rem; margin-bottom: 1.25rem;">
            <span class="item" :class="{ current: current_index_time == i }" v-for="(item, i) in time_array"
              @click="toggle(i, 'time')">{{ item }}天</span>
          </div>
        </div>
        <div class="asset">
          <p class="left">活动阶梯</p>
          <div class="flex  wrap" style="margin-top: 0.6875rem; margin-bottom: 1.25rem;">
            <span class="item" :class="{ current: current_index_quota == i }" v-for="(item, i) in quota_array"
              @click="toggle(i, 'quota')">{{ item }}</span>
          </div>
        </div>
        <!-- <div class="asset">
          <p class="left">活动总额</p>
          <div class="flex  wrap" style="margin-top: 0.6875rem;margin-bottom: 1.25rem;">
            <span class="item current" >{{ total }}</span>
          </div>
        </div> -->
        <div class="ratio"><span>组合比例：{{rate}}%</span><span class="ml-33">剩余总额：{{usable_quota}}</span></div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { scrollMixin } from "../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      text: "",
      Show: false,
      current_index_time: 0,
      current_index_quota: 0,

      list: [],
      total_page: 1,
      isLoadMore: true,
      page: 1,

      id:"",
      rate:"",
      usable_quota:"",
      time_array: [],
      quota_array: [],
      total_array: [],
    };
  },
  computed:{
    total(){
      return this.total_array[this.current_index_quota];
    },
  },
  activated() {
    this.getData();
    this.record();
  },
  methods: {
    record(page = 1) {
      $http.get('plugin.wise-yuan-trade.frontend.quality-activity.record', { page }, '').then(({result, msg, data}) => {
        this.isLoadMore = true;
        if (result) {
          (page == 1) ? (this.list = data.data) : (this.list = this.list.concat(data.data));
          this.total_page = data.last_page;
          this.page = data.current_page;
        } else {
          this.$toast(msg);
        }
      })
    },
    getData() {
      $http.get("plugin.wise-yuan-trade.frontend.quality-activity.index", '', '').then(({ result, msg, data }) => {
        if (result) {
          let text = `${data.quality_name}活动`;
          this.time_array = data.time_array;
          this.quota_array = data.quota_array;
          this.total_array = data.total_array;
          this.text = text;
          this.fun.setWXTitle(text);
        } else {
          this.$toast(msg);
        }
      })
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.record(page);
    },
    participation() {
      this.Show = true;
      this.get_activity();
    },
    get_activity() {
      let json = {
        time: this.time_array[this.current_index_time],
        quota: this.quota_array[this.current_index_quota],
        total: this.total_array[this.current_index_quota]
      }
      $http.get("plugin.wise-yuan-trade.frontend.quality-activity.activity", json, '').then(({ result, msg, data }) => {
        if (result) {
          this.id = data.id;
          this.rate = data.rate;
          this.usable_quota = data.usable_quota;
          console.log(data, "data===");
        } else {
          this.$toast(msg);
        }
      })
    },
    toggle(i, name) {
      if (name == 'time') {
        this.current_index_time = i;
      } else if (name === 'quota') {
        this.current_index_quota = i;
      }
      this.get_activity();

    },
    confirmCategory() {
      $http.post("plugin.wise-yuan-trade.frontend.quality-activity.join", { id: this.id }, '').then(({ msg ,result}) => {
        this.$toast(msg);
        if(result){
          this.Show = false;
          this.record();
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.consensus-activity-mass-intergral {
  padding: 0.875rem 0.75rem;
  position: relative;
  min-height: 100vh;

  .w375 {
    width: 375px !important;
  }

  .foot_pc {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .left {
    text-align: left;
  }

  .wrap {
    flex-wrap: wrap;
  }

  .current {
    border: 1px solid #f15353;
    background: #f15353;
    color: #fff;
  }

  .ratio {
    background: #fafafa;
    border-radius: 0.625rem;
    padding: 0.9063rem 1rem;
    text-align: left;
  }

  .ml-33 {
    margin-left: 1.0313rem;
  }

  .item {
    border-radius: 1.5625rem;
    border: 1px solid #d6d6dc;
    padding: 0.7813rem 2.3438rem;
    margin-right: 0.9375rem;
  }

  .c-FF2F2F {
    color: #ff2f2f;
  }

  .popup-top {
    padding: 1.125rem 0.875rem;
  }

  .flex {
    display: flex;
  }

  .between {
    justify-content: space-between;
  }

  .align-center {
    align-items: center;
  }

  .btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 1.0938rem 1.5rem;
  }

  .tips {
    margin-left: 0.75rem;
    margin-bottom: 0.9375rem;
    text-align: left;
    font-weight: bold;
    font-size: 0.9375rem;
  }

  .box {
    background: #fff;
    border-radius: 0.625rem;
    padding: 0.9375rem 0.75rem;
    margin-bottom: 5rem;
  }

  .title {
    text-align: left;
    font-weight: bold;
    font-size: 0.875rem;
  }

  .time {
    text-align: left;
    color: #aaaab3;
    margin-top: 0.4688rem;
    font-size: 0.75rem;
  }

  .line {
    width: 100%;
    height: 1px;
    background: #f0f0f1;
    margin-top: 1.0625rem;
    margin-bottom: 0.9375rem;
  }
}
</style>
